<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="../packages/runtime-dom/dist/runtime-dom.global.js"></script>
    <div id="app"></div>
    <script>
      const { createApp, h, createVNode, render, ref, onMounted } =
        VueRuntimeDOM
      const App = {
        setup(props, context) {
          const isFlag = ref(true)
          setTimeout(() => {
            isFlag.value = false
          }, 5000)

          // onMounted(() => {
          //   console.log(this)
          // })
          // onMounted(function () {
          //   console.log(this)
          // })

          return () => {
            // debugger
            //返回函数用来渲染，返回对象用来用 ---render函数是一个effect，数据变化得而函数会重新执行=》jsx
            return isFlag.value
              ? h(
                  'div',
                  {
                    style: {
                      color: 'red'
                    }
                  },
                  '111'
                )
              : h(
                  'li',
                  {
                    key: 'f'
                  },
                  'f'
                )
          }
        }
      }
      // let app = createApp(App, {}).mount('#app')
      // debugger
      const vnode = createVNode(App)
      // debugger
      render(vnode, document.getElementById('app'))

      // 组建的初始化 1. 吧组件创造一个虚拟节点，2，将虚拟节点挂载到容器上
    </script>
  </body>
</html>
